<template>
  <div class="itemStyle">
    <div class="borHeader border-b border-r h-12 text-center leading-10"><span>{{ itemObj.language_name }}</span>
      <span v-if="itemObj.language_id == 1 || itemObj.language_id == 2" class="ml-1 base-red-color">*</span>
      <el-button v-if="itemObj.language_id != 1" class="ml-1" @click="translate(itemObj.language_code)" link> <svg-icon
          class="base-text-color w-4 h-4 " icon-class="fanyi" /></el-button>
    </div>
    <div class="inputStyle p-2 border-r border-b index-bgColor">
      <el-input v-model.trim="itemObj.name" placeholder="规格名称" />
    </div>
    <template v-for="(obj, o) in itemObj.language_values" :key="o">
      <div class="inputStyle p-2 border-r border-b">
        <span class="attribute" v-if="obj.language_id == 0">规格名称</span>
        <el-input v-else v-model.trim="obj.value" placeholder="规格值名" />
      </div>
    </template>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => { }
  },
})

const emit = defineEmits(['update:modelValue', 'translate'])

const itemObj = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
  }
})
// 翻译英语
const translate = (language_code) => {
  emit('translate', language_code)
}
</script>

<style lang="scss" scoped>
.itemStyle {
  min-width: 80px;
  flex: auto;

  .inputStyle {
    .attribute {
      height: 32px;
      display: inline-block;
      line-height: 32px;
    }

  }

  &:last-child {
    border-bottom: 0;

    .borHeader {
      border-right: 0;
      border-bottom: 0;
    }

    .inputStyle {
      border-right: 0;

    }
  }
}

.borHeader {
  background: #F6FAFF;
  box-shadow: 0px 1px 0px 0px #E6E7E9;
  line-height: 48px;
  border-bottom: 0;
}

.index-bgColor {
  background-color: #FEF6E7;
}
</style>